<%@page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Lvniao</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/main.css"></link>
	<script src="${pageContext.request.contextPath}/statics/js/jquery-3.2.1.js"></script>
	<script>
		$(function(){
			$.ajax({
				url:"${pageContext.request.contextPath}/home/list",
				success:function(data){
					$(".maincontainer .left .articles").html("");
					for(var i in data){
						var content = '<div class="contentSection article">';
						content += '<div class="articleTitle" addr="${pageContext.request.contextPath}/articles/article/' + data[i].id + '">' + data[i].name + '</div>'
						content += '<div class="articleContent">';
						content += data[i].summary;
						content += '</div>';
						content += '<div class="articleInfo">';
						content += '<span>分类：' + data[i].category.name + '</span>';
						content += '<span>作者：' + data[i].author.name + '</span>';
						content += '<span>时间：' + data[i].createTime + '</span>';
						content += '</div>';
						content += '</div>';
						$(".maincontainer .left .articles").append(content);
					}
					$(".articleTitle").click(function(){
						var addr = $(this).attr("addr");
						window.location = addr;
					});
				}
			});
			$.ajax({
				url:"${pageContext.request.contextPath}/articles/categorylist",
				success:function(data){
					$(".catagory .content ul").html("");
					for(var i in data){
						var content = '<li addr="${pageContext.request.contextPath}/articles/category/' + data[i].id + '">' + data[i].name + '(' + data[i].count + ')</li>'
						$(".catagory .content ul").append(content);
					}
					$(".catagory .content ul li").click(function(){
						var addr = $(this).attr("addr");
						window.location = addr;
					});
				}
			});
			$.ajax({
				url:"${pageContext.request.contextPath}/articles/recentcomments",
				success:function(data){
					$(".recentcomment .content ul").html("");
					for(var i in data){
						var content = '<li>' + data[i].name + ': ' + data[i].message + '</li>'
						$(".recentcomment .content ul").append(content);
					}
				}
			});
			$.ajax({
				url:"${pageContext.request.contextPath}/articles/recent",
				success:function(data){
					$(".recent .content ul").html("");
					for(var i in data){
						var content = '<li addr="${pageContext.request.contextPath}/articles/article/' + data[i].id + '">' + data[i].name + '</li>'
						$(".recent .content ul").append(content);
					}
					$(".recent .content ul li").click(function(){
						var addr = $(this).attr("addr");
						window.location = addr;
					});
				}
			});
			$(".nav .item").mouseenter(function(){
				$(this).addClass("hover");
			}).mouseleave(function(){
				$(this).removeClass("hover");
			}).click(function(){
				var addr = $(this).attr("addr");
				window.location = addr;
			});
			$(".pageSection .item").mouseenter(function(){
				$(this).addClass("hover");
			}).mouseleave(function(){
				$(this).removeClass("hover");
			}).click(function(){
				$(".pageSection .item").removeClass("select");
				$(this).addClass("select");
			});
			$(window).scroll(function(){
				if($(window).attr("scrollY") < 50)
				{
					$(".navsection").css("position", "static");
					$(".maincontainer").css("margin-top", "10px");
				}
				else
				{
					$(".navsection").css("position", "fixed");
					$(".navsection").css("top", "0");
					$(".maincontainer").css("margin-top", "83px");
				}
			})
		});
	</script>
</head>
<body>
	<div class="section header navsection">
		<div class="content">
			<div class="navbar">
				<div class="nav">
					<ul>
						<li class="item select" addr="${pageContext.request.contextPath}/home">首页</li>
						<li class="item" addr="${pageContext.request.contextPath}/articles">文章</li>
						<li class="item" addr="${pageContext.request.contextPath}/home/contact">联系</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="section">
		<div class="content">
			<div class="maincontainer">
				<div class="left">
					<div class="articles">
					</div>
					<div class="pageSection">
						<ul>
							<li class="item">&lt;&lt;</li>
							<li class="item">&lt;</li>
							<li class="item select">1</li>
							<li class="item">2</li>
							<li class="item">3</li>
							<li class="item">4</li>
							<li class="item">5</li>
							<li class="item">&gt;</li>
							<li class="item">&gt;&gt;</li>
						</ul>
					</div>
				</div>
				<div class="right">
					<div class="contentSection aboutme">
						<img src="${pageContext.request.contextPath}/statics/images/lvniao.png" height="128">
						<h2>旅鸟</h2>
						<h4>在代码的海洋里漂泊</h4>
					</div>
					<div class="contentSection catagory">
						<div class="title">
							文章分类
						</div>
						<div class="content">
							<ul>
							</ul>
						</div>
					</div>
					<div class="contentSection recent">
						<div class="title">
							最新文章
						</div>
						<div class="content">
							<ul>
							</ul>
						</div>
					</div>
					<div class="contentSection recentcomment">
						<div class="title">
							最新评论
						</div>
						<div class="content">
							<ul>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="section footer">

	</div>
</body>
</html>